<!DOCTYPE HTML>
<html>
<head>
    <title>Test </title>
    <style type="text/css">
        #div1, #div2
        {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
            ev.preventDefault();
        }
    </script>
</head>
<body>
    <p>
        Drag &amp; Drop</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondblclick="return div1_ondblclick()">
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <br />
    <img id="drag1" src="assets/image/img_logo.gif" draggable="true" ondragstart="drag(event)"
        width="336" height="69" alt="alt" />
    <img id="drag2" src="assets/image/img_logo2.gif" draggable="true" ondragstart="drag(event)"
        width="336" height="69" alt="alt" />
</body>
</html>